<template>
  <div class="container">
    <div id="mybg" class="dynamic">
      <el-calendar v-model="value">
      </el-calendar>
    </div>
    <el-button @click="toPower">权限页面</el-button>
    <el-button @click="toLogout">退出登录</el-button>
    <el-button v-permission="{role:['admin', 'student']}">都能看见</el-button>
    <el-button v-permission="{role:['admin']}">管理员能看见</el-button>
    <el-button v-permission="{role:['student']}">学生能看见</el-button>
  </div>
</template>

<script>
import { removeToken } from '@/utils/auth'
export default {
  name: 'HomeIndex',
  components: {},
  props: {},
  data () {
    return {
      value: new Date()
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.createBg()
  },
  methods: {
    toPower () {
      this.$router.push({
        path: '/power'
      })
    },
    toLogout () {
      this.$router.push('/login')
      removeToken()
      window.location.reload() // 刷新vuex
    },
    createBg () {
      /* eslint-disable */
      // console.log(VANTA)
      VANTA.BIRDS({
        el: '#mybg',
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00,
        // backgroundColor: 0x70e2f
        backgroundColor: '#fff'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
    height: 100%;
    .dynamic{
      width: 100%;
      height: 100%;
    }
  }
  // vanta画布圆角去除
  /deep/.vanta-canvas {
    border-radius: 0px;
  }
  // 日历组件透明
  .el-calendar {
    background-color: rgba(255, 255, 255, 0);
  }
  // 日期选择状态半透明
  /deep/.el-calendar-table td.is-selected {
    background-color: rgba(242, 248, 254, 0.5);
  }
  // 日期触碰状态半透明
  /deep/.el-calendar-table .el-calendar-day:hover {
    background-color: rgba(242, 248, 254, 0.5);
  }
  // 右上角按钮透明
  /deep/.el-button {
    background: rgba(255, 255, 255, 0);
  }
</style>
